<template>
    <div class="work-header flex-jc-center">
        <div class="header-wrap  z-layout">
            <div class="header-inner">
                <img src="@assets/img/头像.jpeg" alt="">
                <div>
                    <div class="title"><span>大白白小灰灰</span></div> 
                    <div class="user-info"></div> 
                    <div class="user-info">id="67"</div> 
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { ref,reactive,toRefs,defineComponent,onMounted,getCurrentInstance} from 'vue'
export default defineComponent({
    name:'',
    setup: ()=>{
        let data = reactive({
            
        })
        const { proxy } = getCurrentInstance() as any;
         
        return {
           ...toRefs(data),
        }
    }
})
</script>
<style lang="scss" scoped>
.work-header{
    height:148px;
    margin: 24px auto 0;
    .header-wrap{
        height: 100%;
        background: url(https://www.qingline.net/_nuxt/img/user_top_bg.6d750a3.png) no-repeat 50%;
        background-size: cover;
        .header-inner{
            padding: 2rem 1.4286rem 0;
            display: flex;
            img{
                border-radius: 50%;
                overflow: hidden;
                width: 6.8571rem;
                height: 6.8571rem;
                margin-right: 1.4286rem;
            }
            .title{
                font-size: 1.4286rem;
                height: 2.3571rem;
                line-height: 2.3571rem;
                color: #313541;
                margin: 0.7143rem 0;
            }
            .user-info{
                color: #8091a5;
                min-height: 1.4286rem;
                line-height: 1.4286rem;
            }
        }
    }
}

</style>